<template>
  <el-dialog title="分配" :visible.sync="open" append-to-body>
    <el-tag>你选择了{{form.assignIds.length}}个{{title}}</el-tag>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptId">
            <treeselect :disable-branch-nodes="true" v-model="form.deptId" @input="handleChangeDept" :options="deptOptions" :show-count="true" placeholder="请选择部门" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工" prop="userId">
            <el-select v-model="form.userId" ref="userSelect" placeholder="请选择员工">
              <el-option v-for="user in deptUserOptions" :label="user.nickName" :value="user.userId" :key="user.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { listUser } from "@/api/system/user";
  import { treeselect } from "@/api/system/dept";
  import { addAssignRecord } from "@/api/crm/assignRecord";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "assign",
      components: {Treeselect},
      props: ['type', 'title'],
      data() {
          return {
            open: false,
            form: {
              assignIds: []
            },
            rules: {
              deptId: [
                { required: true, message: "部门不能为空", trigger: "change" },
              ],
              userId: [
                { required: true, message: "用户不能为空", trigger: "change" },
              ],
            },
            deptOptions: [],
            deptUserOptions: [],
          }
      },
      created() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      methods: {
        submitForm() {
          this.$refs['form'].validate(valid => {
            if( valid ) {
              // this.assignForm.userName = this.$refs['userSelect'].selected.value;
              this.form.userName = this.deptUserOptions.filter(user=>user.userId == this.form.userId)[0].userName
              let list = this.convertToAssignList()
              addAssignRecord(list).then(resp => {
                this.$modal.msgSuccess("分配成功");
                this.open = false;
                this.$emit('success');
              })
            }
          })
        },
        handleChangeDept(val) {
          listUser({deptId: val}).then(resp => {
            this.deptUserOptions = resp.rows
          })
        },
        convertToAssignList() {
          let list = [];
          for(let assignId of this.form.assignIds) {
            let item = {
              assignId: assignId,
              type: this.type, // 跟枚举变量名对应
              latest: 1,
              deptId: this.form.deptId,
              userId: this.form.userId,
              userName: this.form.userName,
            }
            list.push(item)
          }
          return list;
        },
        resetForm() {
          return this.form = {
            assignIds: [],
            type: this.type,
            latest: 1,
            deptId: null,
            userId: null,
            userName: null,
          }
        },
      },

    }

</script>

<style scoped>

</style>
